<script lang="ts" setup>

import { onMounted, ref, useTemplateRef } from 'vue';
import { areaList } from '@vant/area-data';
import { getHotelFn, searchHotelFn } from '@/api/hotel';
import { showToast } from 'vant';

interface HotelItem {
    id: number;
    imgUrl: string;
    name: string;
    address: string;
    price: number;
}


const show = ref(false);
const hotelDate = ref<HotelItem[]>([]);
const search = ref('');


//日历时间的显示

const date = ref('11/14');
const data2 = ref('11/14');
const week = ref('星期六')
const week1 = ref('星期六')
const days = ref(1)
const isflag = ref(false);

const formatDate = (date: any) => `${date.getMonth() + 1}/${date.getDate()}`
const weekDate = (date: any) => {
    const day = ['日', '一', '二', '三', '四', '五', '六'];
    return `周${day[date.getDay()]}`;
}
const onConfirm = (values: any) => {
    const [start, end] = values
    const day = end.getTime() - start.getTime()
    days.value = Math.floor(day / (24 * 3600 * 1000))
    isflag.value = false;
    date.value = `${formatDate(start)}`
    data2.value = ` ${formatDate(end)} `
    week.value = weekDate(start)
    week1.value = weekDate(end)

};


onMounted(() => {
    getHotelFn().then(res => {
        hotelDate.value = res.data.data;
    })

})

function SearchClick() {
    searchHotelFn({
        name: search.value
    }).then(res => {

        if (res.data.code === 200) {
            hotelDate.value = res.data.data;
            showToast('搜索成功')
        }


    })
}

const adrress = ref('北京市');
function onPConfirm(values: any) {
    adrress.value = values.selectedOptions[1].text;
    show.value = false;
}

</script>


<template>
    <div class="hotel-container">

        <van-calendar v-model:show="isflag" type="range" @confirm="onConfirm" />

        <van-popup v-model:show="show" position="bottom">
            <template #default>
                <van-area title="地址选择" :area-list="areaList" @confirm="onPConfirm" />
            </template>
        </van-popup>



        <header class="hotel-header">

            <div class="back">
                <div class="left" @click="$router.go(-1)">
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%90%9C%E7%B4%A2/u459.svg"></van-image>
                </div>
                <div class="right" @click="$router.push('/mylogin/order')">
                    <span> <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1302.svg"></van-image><span
                            style="margin-left: 10px; position: relative;bottom: 4px;;">订单</span></span>
                </div>
            </div>
        </header>


        <main class="hotel-main">
            <van-tabs line-width="0" title-active-color="rgb(52, 120, 246)">
                <van-tab title="酒店">
                    <div class="hotel-content">
                        <div class="postion">
                            <div class="left">
                                <p style="font-size: 12px;color: #999;">城市</p>
                                <span @click="show = true"><span style="font-size: 18px;color: #333;">{{ adrress
                                        }}</span><van-image style="width: 9px;height: 9px;margin-left: 5px;"
                                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1352.svg"></van-image></span>
                            </div>

                            <div class="right">
                                <p style="font-size: 12px;color: #999;">位置</p>
                                <span style="font-size: 18px;color: #333;">CBD历史文化公园</span>
                            </div>
                            <van-image class="position-icon"
                                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1340.svg"></van-image>
                        </div>
                        <van-image style="position: relative; bottom: 30px;left: 15px;"
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1333.svg"></van-image>
                        <div class="date">
                            <div class="left">
                                <p style="color: #999;">入住时间</p>
                                <p @click="isflag = true"><span
                                        style="font-size: 16px;color: #333;font-weight: bold;">{{
                                            date }}</span><span style="margin-left: 10px;">{{ week }}</span>
                                </p>
                                <span style="position: absolute; bottom: 20px;left: 125px;width: 20px;">{{ days
                                    }}晚</span>
                            </div>
                            <div class="right">
                                <p style="color: #999;">离店时间</p>
                                <p @click="isflag = true"><span
                                        style="font-size: 16px;color: #333;font-weight: bold;">{{
                                            data2 }}</span><span style="margin-left: 10px;">{{ week1 }}</span>
                                </p>
                            </div>
                        </div>

                        <div class="search">
                            <van-field placeholder="试试搜:酒店/地名" v-model:model-value="search" />
                            <button @click="SearchClick">查找酒店</button>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="月租房"></van-tab>
                <van-tab title="民宿"></van-tab>
            </van-tabs>
        </main>

        <footer class="hotel-footer">
            <div class="top-nav">
                <div>
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1359.svg"></van-image>
                    <p style="color: #555;font-size: 13px;">热门推荐</p>
                </div>
                <div>
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1321.svg"></van-image>
                    <p style="color: #555;font-size: 13px;">本地热卖</p>
                </div>
                <div>
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1320.svg"></van-image>
                    <p style="color: #555;font-size: 13px;">优选新店</p>
                </div>
                <div>
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1322.svg"></van-image>
                    <p style="color: #555;font-size: 13px;">网红酒店</p>
                </div>
                <div>
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1323.svg"></van-image>
                    <p style="color: #555;font-size: 13px;">滨海度假</p>
                </div>
            </div>

            <div class="hotel-card">
                <div class="content" v-for="item in hotelDate" :key="item.id"
                    @click="$router.push('/hotel/hoteldetail/')">
                    <van-image :src="item.imgUrl"></van-image>
                    <p style="color: #333;font-size: 15px;font-weight: bold;position: relative; left:10px;">
                        {{ item.name }}</p>
                    <p><span style="color: #999; position: relative; left:10px; bottom: 10px;">{{ item.address
                            }}</span><span
                            style="color: #D9001B;font-size: 20px; position: relative; left:55px;bottom: 10px;"><span
                                style="color: #D9001B;font-size: 12px;">￥</span>{{ item.price }}<span
                                style="color: #999;font-size: 12px;">起</span></span></p>
                </div>
            </div>

        </footer>
    </div>
</template>


<style scoped lang="scss">
.hotel-container {
    height: 100%;
    width: 100%;

    .back {
        width: 375px;
        height: 300px;
        display: flex;
        justify-content: space-between;
        background-image: url('https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/%E4%B8%93%E9%A2%98%E5%9B%BE_u1293.png');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

        .left {
            position: absolute;
            top: 30px;
            left: 20px;
        }

        .right {
            position: absolute;
            top: 30px;
            right: 20px;
        }
    }

    .hotel-main {
        width: 95%;
        height: 350px;

        .van-tabs {
            position: relative;
            bottom: 150px;
            left: 10px;
        }

        .hotel-content {
            width: 100%;
            height: 300px;
            background-color: white;
            position: relative;
            bottom: 13px;

            .postion {
                width: 100%;
                height: 100px;
                display: flex;
                justify-content: space-around;

                .position-icon {
                    width: 18px;
                    height: 18px;
                    position: relative;
                    top: 40px;
                }
            }

            .date {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .left {
                    position: relative;
                    left: 25px;
                    bottom: 30px;
                }

                .right {
                    position: relative;
                    right: 60px;
                    bottom: 30px;
                }
            }

            .search {
                width: 100%;
                position: relative;
                bottom: 20px;

                button {
                    width: 325px;
                    height: 45px;
                    border: 0;
                    background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
                    color: white;
                    border-radius: 10px;
                    position: absolute;
                    left: 15px;
                    top: 60px;
                }
            }


        }
    }


    .hotel-footer {
        width: 100%;
        position: relative;
        bottom: 155px;

        .top-nav {
            width: 90%;
            display: flex;
            justify-content: space-between;
            text-align: center;
            position: relative;
            left: 20px;

        }

        .hotel-card {
            width: 100%;
            margin-top: 10px;

            .content {
                width: 90%;
                height: 170px;
                background-color: white;
                border-radius: 10px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
                overflow: hidden;
                margin-bottom: 20px;
                position: relative;
                left: 20px;
            }
        }
    }

}
</style>